<template>
  <Condition :conditionList="conditionList" v-model="condition">
    <template #search="{ condition }">
      <el-input
          v-model="condition.search" size="large"
          placeholder="请输入搜索的任务关键词">
        <template #prefix>
          <el-icon class="el-input__icon">
            <search/>
          </el-icon>
        </template>
      </el-input>
    </template>

  </Condition>
  <TaskContainer>
    <el-table :data="list" style="width: 100%" border ref="tb_table">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="序号" width="60"/>
      <el-table-column prop="level" label="难易程度" width="120">
        <template v-slot="scope">
          {{ getLeaveLabel(scope.row.level) }}
        </template>
      </el-table-column>
      <el-table-column prop="stage" label="阶段" width="120"/>
      <el-table-column prop="module" label="模块名" width="160"/>
      <el-table-column prop="title" label="任务名" class-name="hidden-column"/>
    </el-table>

    <!-- 添加分页插件 -->
    <div style="margin: 20px 0;">
      <el-pagination background layout="prev, pager, next"
                     hide-on-single-page
                     :page-size="pagination.rows"
                     :pager-count="11"
                     v-model:current-page="pagination.page"
                     :total="pagination.total"
       @current-change="getTaskList"/>
    </div>
  </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"

export default {
  components: {
    HeaderNav,
    TaskContainer,
    Condition,
  },
  created() {
      window.$bus.on("assign-task", (index)=>{
          this.assignTask(index)
          this.getTaskList();
      })
      //加载数据的时候刷新
      this.getTaskList();
      this.stageable();
  },
  data() {
    return {
      pagination: {
        page: 1,
        rows: 20,
        total:0,
      },
      list: [],//展示任务列表
      condition: {}, // 查询条件
      conditionList: [],
    }
  },
  methods: {
     stageable() {
      this.$api.stageable().then(ret => {
        let stages = ret.reduce((arr, data) => {
          let stage = {
            id: data.id,
            name: data.name,
            child: {
              name: "任务模块",
              value: 'module',
              list: data.module_set.reduce((array, module) => {
                let m = {
                  id: module.id,
                  name: module.name
                }
                array.push(m)
                return array
              }, [])
            }
          }
          arr.push(stage)
          return arr
        }, []);

        let result = [
          {
            name: "任务阶段",
            value: 'stage',
            list: stages,
          },
          {
            name: "难易程度",
            value: 'level',  // 查询条件对应的键
            list: [
              {id: 1, name: "简单题"},
              {id: 2, name: "中等题"},
              {id: 3, name: "难题"},
              {id: 4, name: "选做题"},
            ],
          },
        ]
        this.conditionList = result
      })
    },
    getTaskList() {
      let queryParams = {
        page: this.pagination.page,
        rows: this.pagination.rows,
      };
      if (this.condition.level !== null && this.condition.level !== undefined) {
        queryParams.level = this.condition.level;
      }
      if (this.condition.stage !== null && this.condition.stage !== undefined) {
        queryParams.stage = this.condition.stage;
      }
      if (this.condition.module !== null && this.condition.module !== undefined) {
        queryParams.module = this.condition.module;
      }
      if (this.condition.search !== null && this.condition.search !== undefined) {
        queryParams.search = this.condition.search;
      }

      ///获取查询到的任务列表
      this.$api.GroupshowTaskLists(queryParams).then(ret => {
        this.pagination.total = ret.count
        this.list = ret.results
      })
    },
    getLeaveLabel(leave) {
      switch (leave) {
        case 1:
          return '简单题';
        case 2:
          return '中等题';
        case 3:
          return '困难题';
        case 4:
          return '选做题';
        default:
          return '未知难度';
      }
    },
    assignTask(index){
       console.log("1111111111hello word")
      //获取表格中选中的行 (怎么获取表格中的元素:给要获取的表格加上ref)
		    let rows = this.$refs.tb_table.getSelectionRows(); //获取选中的所有任务
        let selectedIds = rows.map(row => row.id); // 使用map方法提取每个行的id

        let group_id = this.$route.query.id;   //获取当前组的id

        this.$api.assignTask(selectedIds,group_id).then(ret=>{
            this.$layer.msg("添加任务成功");
            return true;
        })
        // 向 父页面 消息总线 发送 close-win 关闭窗口事件、通知父页面 关闭弹框
        // 父页面 监听 close-win , 并关闭该窗口 刷新
        parent.$bus.emit('close-win-refresh', index);
    },
  },
  watch:{
    condition:{
      handler(val,oldVal){
        this.getTaskList()
      },
      deep:true, //进行深度监听
    }
  },
}
</script>

<style scoped>
.table-modules {
  padding: 10px 20px;
}

.table-modules span {
  padding: 2px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.toolbar {
  position: relative;
  right: 10px;
  z-index: 200;
  text-align: right;
  margin: 20px;
  flex: 1 1 auto;
}

</style>

<style>
.hidden-column .cell {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>